<template>
  <div>
    <h1 class="text-primary">Vue3中，vue3的生命周期（也叫生命周期函数或叫生命周期钩子）</h1>
    <h5>
      <div>vue2组件的生命周期：</div>
      <div>创建（创建前 beforeCreate、创建后 created）</div>
      <div>挂载（挂载前 beforeMount、挂载后 mounted）</div>
      <div>更新（更新前 befoerUpdate、更新后 updated）</div>
      <div>销毁（销毁前 beforeDestroy、销毁后 destroyed）</div>
    </h5>
    <h5>
      <div>vue2父子组件执行顺序：</div>
      <div>1.父组件===创建前</div>
      <div>2.父组件===创建后</div>
      <div>3.父组件===挂载前</div>
      <div>4.子组件===创建前</div>
      <div>5.子组件===创建后</div>
      <div>6.子组件===挂载前</div>
      <div>7.子组件===挂载后</div>
      <div>8.父组件===挂载后</div>
      <div>更新</div>
      <div>1.父组件===更新前</div>
      <div>2.子组件===更新前</div>
      <div>3.子组件===更新后</div>
      <div>4.父组件===更新后</div>
      <div>销毁</div>
      <div>1.父组件===销毁前</div>
      <div>2.子组件===销毁前</div>
      <div>3.子组件===销毁后</div>
      <div>4.父组件===销毁后</div>
    </h5>
    <h5>
      <div>vue3组件的生命周期：</div>
      <div>
        创建（去除了 beforeCreate 和 created，合成了 setup 用于代表创建，setup 在 beforeCreate 和 created
        之前执行，创建的是 data 和 method）
      </div>
      <div>挂载（挂载前 onBeforeMount、挂载后 onMounted）</div>
      <div>更新（更新前 onBeforeUpdate、更新后 onUpdated）</div>
      <div>卸载（卸载前 onBeforeUnmount、卸载后 onUnmounted）</div>
    </h5>
    <h5>
      <div>vue3父子组件执行顺序：</div>
      <div>1.父组件===创建</div>
      <div>2.父组件===挂载前</div>
      <div>3.子组件===创建</div>
      <div>4.子组件===挂载前</div>
      <div>5.子组件===挂载后</div>
      <div>6.父组件===挂载后</div>
      <div>更新</div>
      <div>1.父组件===更新前</div>
      <div>2.子组件===更新前</div>
      <div>3.子组件===更新后</div>
      <div>4.父组件===更新后</div>
      <div>卸载</div>
      <div>1.父组件===卸载前</div>
      <div>2.子组件===卸载前</div>
      <div>3.子组件===卸载后</div>
      <div>4.父组件===卸载后</div>
    </h5>
    <div></div>
  </div>
</template>

<script setup lang="ts" name="LifeCycle">
console.log("子===组件创建了")
onBeforeMount(() => {
  console.log("子===挂载前")
})
onMounted(() => {
  console.log("子===挂载后")
})
onBeforeUpdate(() => {
  console.log("子===更新前")
})
onUpdated(() => {
  console.log("子===更新后")
})
onBeforeUnmount(() => {
  console.log("子===卸载前")
})
onUnmounted(() => {
  console.log("子===卸载后")
})
</script>

<style scoped></style>
